<template>
    <!-- 楼层码 -->
    <div id="scan_code" v-if="showCode" :class="['scan_code']">
        <div class="title">扫码选品</div>
        <div class="conent">
            <van-image class="profile" :src="userInfo?.avatar" round fit="cover" />
            <div class="names">{{ userInfo?.nickName }}</div>
            <div class="dandp">{{ userInfo.dept?.deptName }} | {{ roles.roleName }}</div>
            <div class="floor">{{ qrCodeRowName }}</div>
            <div class="qrcode">
                <div class="message">扫描下方的二维码选品</div>
                <img style="width: 200px; height: 200px;" :src="qrCodeData" alt="">
            </div>
            <div class="refresh" @click="getQrCode">
                <van-image :src="icon_shuaxin" />
                刷新二维码
            </div>
            <van-image :src="icon_xiahuagengduo" class="glide" @click="glide" />
        </div>
    </div>
    <div id="home-index" v-if="!showCode" :class="['home-index']">
        <van-image v-if="user.indexOf('inventGroup') != -1" :src="icon_shanghuagengduo" class="icon_shanghuagengduo"
            @click="shanghua"></van-image>
        <div class="home-index-user">
            <van-image class="home-index-user-image" :src="userInfo?.avatar" round fit="cover" />
            <div class="home-index-user-info">
                <div class="home-index-user-info-name">{{ userInfo?.nickName }}</div>
                <div class="home-index-user-info-dandp">
                    {{ userInfo.dept?.deptName }} | {{ positionName(userPost) }}
                </div>
            </div>
            <div class="menu" @click="messageClcik">
                <van-badge :dot="messageTotal > 0">
                    <van-image class="menu_cion" :src="icon_xiaoxi" />
                </van-badge>
            </div>
            <!-- <van-image v-if="isQr()" class="erweima_cion" :src="erweima" @click="weChatSet" /> -->

            <van-popup v-model:show="showQRcode" style="background-color: revert;">
                <div class="QRcode">
                    <div class="code_title">
                        <span>【{{ userInfo?.nickName }}】邀请您扫码入驻</span><br>
                        <span>惠麦供应链系统</span>
                        <van-image class="guanbi_cion" :src="guanbiIcon" @click="showQRcode = false" />
                    </div>
                    <div class="code">
                        <vue-qr class="code_content" ref="qrcode" :text="qrCodeValue" :size="500"></vue-qr>
                    </div>
                    <van-image class="weixin_cion" :src="weixinIcon" @click="shareToWechat" />
                </div>
                <div class="savePicture">
                    <van-button type="primary" @click="download" v-throttle:click style="border-radius: 0;">
                        保存图片到本地
                    </van-button>
                </div>
            </van-popup>

            <!-- <van-badge :dot="newsQuantity !== 0" class="menu_news">
                <van-image :src="icon_xiaoxi" @click="icon_xiaoxiClick" />
            </van-badge> -->
        </div>
        <div class="home-index-notice">
            <van-image class="notice_icon" :src="gonggao" />
            <van-notice-bar class="font" scrollable :text="versionNotice" />
        </div>

        <div class="home-index-data">
            <div class="home-index-data-title">
                <div class="home-index-data-title-title">
                    <van-image class="home-index-todo-title-image" :src="sjjbImage" />
                    <div class="home-index-data-title-title-text">数据简报</div>
                </div>
                <div class="home-index-data-date">
                    <div class="home-index-data-date-first">
                        <div class="home-index-data-date-first-date" @click="showPicker = true">
                            {{ currentDateFormat }}
                        </div>
                        <van-image width="10" height="6" :src="lsxsjImage" />
                    </div>

                    <div class="home-index-data-date-middle">至</div>
                    <div class="home-index-data-date-second">
                        <div class="home-index-data-date-second-date" @click="showPickerBottom = true">
                            {{ currentDateFormatInterval }}
                        </div>
                        <van-image width="10" height="6" :src="lsxsjImage" />
                    </div>
                </div>
            </div>
            <div class="home-index-data-card">
                <div class="home-index-data-card-first">
                    <div class="home-index-data-card-first-first home-index-data-card-position"
                        @click="briefingProducts('新增商品')">
                        <van-image class="home-index-data-card-first-first-image" :src="xzspImage" />
                        <div class="home-index-data-card-first-first-text home-index-data-card-position-text">
                            <div>{{ addProductNums }}</div>
                            <div class="home-index-data-card-first-first-text home-index-data-card-position-text-size">
                                新增商品
                            </div>
                        </div>
                    </div>
                    <div class="home-index-data-card-first-third home-index-data-card-position"
                        @click="briefingProducts('建联商家')">
                        <van-image class="home-index-data-card-first-first-image" :src="jlspImage" />
                        <div class="home-index-data-card-first-third-text home-index-data-card-position-text">
                            <div>{{ jianlianNums }}</div>
                            <div class="home-index-data-card-first-first-text2 home-index-data-card-position-text-size">
                                建联商家
                            </div>
                        </div>
                    </div>
                    <div class="home-index-data-card-second-third home-index-data-card-position"
                        @click="briefingProducts('暂无大货')">
                        <van-image class="home-index-data-card-first-first-image" :src="qshtImage" />
                        <div class="home-index-data-card-second-third-text home-index-data-card-position-text">
                            <div>{{ listingNums }}</div>
                            <div class="home-index-data-card-first-first-text1 home-index-data-card-position-text-size">
                                暂无大货
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home-index-data-card-second">
                    <div class="home-index-data-card-first-second home-index-data-card-position"
                        @click="briefingProducts('上架商品')">
                        <van-image class="home-index-data-card-first-first-image" :src="sjspImage" />
                        <div class="home-index-data-card-first-second-text home-index-data-card-position-text">
                            <div>{{ signNums }}</div>
                            <div class="home-index-data-card-first-first-text5 home-index-data-card-position-text-size">
                                上架商品
                            </div>
                        </div>
                    </div>
                    <div class="home-index-data-card-second-first home-index-data-card-position"
                        @click="briefingProducts('主播选品')">
                        <van-image class="home-index-data-card-first-first-image" :src="zbxpImage" />
                        <div class="home-index-data-card-second-first-text home-index-data-card-position-text">
                            <div>{{ launchNums }}</div>
                            <div class="home-index-data-card-first-first-text3 home-index-data-card-position-text-size">
                                主播选品
                            </div>
                        </div>
                    </div>
                    <div class="home-index-data-card-second-second home-index-data-card-position"
                        @click="briefingProducts('成功入库')">
                        <van-image class="home-index-data-card-first-first-image" :src="rkspImage" />
                        <div class="home-index-data-card-second-second-text home-index-data-card-position-text">
                            <div>{{ warehousingNums }}</div>
                            <div class="home-index-data-card-first-first-text4 home-index-data-card-position-text-size">
                                成功入库
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-index-todo">
            <div class="home-index-todo-title">
                <van-image class="home-index-todo-title-image" :src="dbgzImage" />
                <div>待办工作</div>
            </div>
            <div class="home-index-todo-list">
                <div class="home-index-todo-list-first" v-for="(item, index) in centerList" :key="index"
                    @click="toProductList(item.id)">
                    <van-image class="home-index-todo-list-first-image" :src="item.img" />
                    <div>{{ item.name }}</div>
                    <div :class="index != 1 ? 'home-index-todo-list-first-badge' : 'home-index-todo-list-first-badges'"
                        v-show="item.nums !== 0">
                        <div>{{ item.nums }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-index-shortcuts">
            <div class="home-index-shortcuts-title">
                <van-image class="home-index-todo-title-image" :src="kjrkImage" />
                <div>快捷入口</div>
            </div>
            <div class="home-index-shortcuts-card">
                <div class="home-index-shortcuts-card-left" @click.prevent="addProduct('添加商品')">
                    <van-image :src="tjspImage" class="home-index-shortcuts-card-left-image" />
                    <div class="home-index-shortcuts-card-left-text">添加商品</div>
                    <div class="home-index-shortcuts-card-left-tips">
                        已到样商品或已有信息但未到样商品的详细信息填报
                    </div>
                </div>
                <div class="home-index-shortcuts-card-right">
                    <div class="home-index-shortcuts-card-right-top" @click.prevent="addProduct('添加供应商')">
                        <van-image :src="tjgysImage" class="home-index-shortcuts-card-right-top-image" />
                        <div class="home-index-shortcuts-card-right-top-text">
                            添加供应商
                        </div>
                        <div class="home-index-shortcuts-card-right-top-tips">
                            录入新建联的商家信息
                        </div>
                    </div>
                    <div class="home-index-shortcuts-card-right-bottom" @click.prevent="expiredClick('大货到期')">
                        <van-image :src="tjspImage1" class="home-index-shortcuts-card-right-bottom-image" />
                        <div class="home-index-shortcuts-card-right-bottom-text">
                            大货到期
                        </div>
                        <div class="home-index-shortcuts-card-right-bottom-tips">
                            商品大货视频待上传
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <van-popup v-model:show="showPicker" position="bottom">
        <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" v-model="currentDate" :max-date="maxDate" />
    </van-popup>
    <van-popup v-model:show="showPickerBottom" position="bottom">
        <van-date-picker @confirm="onConfirmBottom" @cancel="showPickerBottom = false" v-model="currentDateBottom"
            :min-date="minDate" />
    </van-popup>
</template>

<script setup lang="ts">
const showCode = ref(false)
// 消息数量
const messageTotal = ref(0)
// 上滑事件
const shanghua = () => {
    getQrCode()
    showCode.value = true
}
// 下滑事件
const glide = () => {
    const showDom = document.querySelector("#home-index") as HTMLElement;
    if (showDom) {
        showDom.style.animation = `slide-show-bottom-top 1s ease forwards`;
    }
    const hideDom = document.querySelector("#scan_code") as HTMLElement;
    if (hideDom) {
        hideDom.style.animation = `slide-hide-bottom-top 1s ease forwards`;
    }
    showCode.value = false

}

import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getInfo } from "@/api/supplierList/index";
import { loginStore } from "@/store/login";
import { storeToRefs } from "pinia";
import { listNotice } from '@/api/loginApi'
import { stripTags } from '@/utils/index'
// import { getEnvValue } from "@/utils/index";
import { getTotalInvent, inventTimeTotal } from "@/api/productList/index";
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
// import { countNotReadMsg } from '@/api/operation/index'
import { userStore } from "@/store/user";
import { qrCode, getQrCodeDeptName } from "@/api/operation/index";
import { queryDeptCount } from '@/api/operation/index'
const route = useRoute();
const userRoute = userStore();
const store = loginStore();
const { token } = storeToRefs(store);
const { user } = storeToRefs(userRoute)
const weixinIcon = new URL(
    "@/assets/porduct/icon_weixin.png",
    import.meta.url
).href;
const guanbiIcon = new URL(
    "@/assets/porduct/icon_guanbi.png",
    import.meta.url
).href;
// 消息
const icon_xiaoxi = new URL(
    "@/assets/operation/icon_xiaoxi.png",
    import.meta.url
).href;

const tjgysImage = new URL(
    "@/assets/home/icon_tianjiagongyingshnag@2x.png",
    import.meta.url
).href;

const tjspImage = new URL(
    "@/assets/home/icon_tianjiashangpin@2x.png",
    import.meta.url
).href;
const tjspImage1 = new URL(
    "@/assets/home/icon_yaoyueyangpin@2x.png",
    import.meta.url
).href;
const sjjbImage = new URL(
    "@/assets/home/icon_shujujianbao@2x.png",
    import.meta.url
).href;

const kjrkImage = new URL(
    "@/assets/home/icon_kuaijierukou@2x.png",
    import.meta.url
).href;

const lsxsjImage = new URL(
    "@/assets/home/icon_lansexiasanjiao.png",
    import.meta.url
).href;

const xzspImage = new URL(
    "@/assets/home/icon_xinzengshangpin@2x.png",
    import.meta.url
).href;

const sjspImage = new URL(
    "@/assets/home/icon_shangjiashangpin@2x.png",
    import.meta.url
).href;

const jlspImage = new URL(
    "@/assets/home/icon_jianlianshangjia@2x.png",
    import.meta.url
).href;

const zbxpImage = new URL(
    "@/assets/home/icon_zhuboxuanpin@2x.png",
    import.meta.url
).href;

const rkspImage = new URL(
    "@/assets/home/icon_rukushangpin@2x.png",
    import.meta.url
).href;

const qshtImage = new URL(
    "@/assets/home/icon_qianshuhetong@2x.png",
    import.meta.url
).href;

const dbgzImage = new URL(
    "@/assets/home/icon_daibangongzuo@2x.png",
    import.meta.url
).href;

// const erweima = new URL(
//     "@/assets/home/icon_erweima.png",
//     import.meta.url
// ).href;

const gonggao = new URL(
    "@/assets/home/icon_gonggao.png",
    import.meta.url
).href;

// const icon_xiaoxi = new URL(
//     "@/assets/operation/icon_xiaoxi.png",
//     import.meta.url
// ).href;

const icon_shanghuagengduo = new URL(
    "@/assets/productHome/icon_shanghuagengduo.png",
    import.meta.url
).href;

const icon_shuaxin = new URL(
    "@/assets/home/icon_shuaxin.png",
    import.meta.url
).href;
const icon_xiahuagengduo = new URL(
    "@/assets/home/icon_xiahuagengduo.png",
    import.meta.url
).href;

const router = useRouter();
const userInfo = ref<any>({});
const userPost = ref<any>([])
const roles = ref<any>({});
const avtiveIndex = ref<any>(0);
const showPicker = ref(false);
const showPickerBottom = ref(false)
const addProductNums = ref(0);
const listingNums = ref(0);
const jianlianNums = ref(0);
const launchNums = ref(0);
const warehousingNums = ref(0);
const signNums = ref(0);
const showQRcode = ref(false)
const versionNotice = ref()
// const newsQuantity = ref(0)

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();
const currentDate = ref([
    year + "",
    month < 10 ? "0" + month : month + "",
    date < 10 ? "0" + date : date + "",
]);
const currentDateBottom = ref([
    year + "",
    month < 10 ? "0" + month : month + "",
    date < 10 ? "0" + date : date + "",
]);

/** 回显周期筛选字段 */
const startTime = computed(() => {
    return route.query.startTime;
});
/** 回显周期筛选字段 */
const endTime = computed(() => {
    return route.query.endTime;
});
const currentDateFormat = ref<any>(currentDate.value.join("-"))
const currentDateFormatInterval = ref<any>(currentDateBottom.value.join("-"))

const qrCodeData = ref()
const qrCodeRowName = ref('')

const qrcode = ref();
const qrCodeValue = ref('');
// const weChatSet = () => {
//     if (getEnvValue("VITE_APP_NEED_HEAD") == '灰度') {
//         // 当前灰度环境暂无小程序，先放开发
//         qrCodeValue.value = `https://supply-pc-pre.huimaisoft.com:19203?deptName=${userInfo.value.dept?.deptName}&roleName=${userInfo.value.userName}&type=app`
//     } else if (getEnvValue("VITE_APP_NEED_HEAD") == '测试' || getEnvValue("VITE_APP_NEED_HEAD") == '开发') {
//         qrCodeValue.value = `https://dev-supply.huimaisoft.com:19315?deptName=${userInfo.value.dept?.deptName}&roleName=${userInfo.value.userName}&type=app&department=research`
//     } else {
//         qrCodeValue.value = `https://store.huimaisoft.com:19102?deptName=${userInfo.value.dept?.deptName}&roleName=${userInfo.value.userName}&type=app`
//     }
//     showQRcode.value = true
// }
// const isQr = () => {
//     if (userInfo.value.roles) {
//         if (user.value === 'inventStaff') {
//             return true
//         } else {
//             return false
//         }
//     } else {
//         return false
//     }
// }
// 下载
const download = () => {
    // // TODO 接口返回数据  
    // let res = "https://dev-supply.huimaisoft.com:19315"
    // // 数据返回生产二维码
    // qrCodeValue.value = res;

    // 生成二维码是属于异步行为，所以下载二维码也为异步行为

    const timer = setTimeout(() => {

        let imgurl = qrcode.value.imgUrl; //  qrcode.value.imgUrl 是包含 base64 数据的完整 URL

        // 提取 base64 数据部分
        if (imgurl.includes(";base64,")) {
            imgurl = imgurl.split(";base64,")[1]; // 获取 base64 数据部分

        } else {
            // 如果 URL 不包含 ";base64,"，可能需要根据具体情况进行处理
            console.error('URL中不包含";base64,"，请确认URL格式是否正确。');
        }

        // 发送图片请求给webview
        (window as any).uni.webView.postMessage({
            data: {
                type: "img",
                url: imgurl,
                // 方式：保存
                function: "save",
                header: {
                    Authorization: `Bearer ${token.value}`,
                    clientid: "e5cd7e4891bf95d1d19206ce24a7b32e",
                },
            },
        });
        clearTimeout(timer);
    });
}
// 分享
const shareToWechat = () => {
    // 获取二维码 base64 数据

    let imgurl = qrcode.value.imgUrl; // qrcode.value.imgUrl 是包含 base64 数据的完整 URL

    // 提取 base64 数据部分
    if (imgurl.includes(";base64,")) {
        imgurl = imgurl.split(";base64,")[1]; // 获取 base64 数据部分

    } else {
        // 如果 URL 不包含 ";base64,"，可能需要根据具体情况进行处理
        console.error('URL中不包含";base64,"，请确认URL格式是否正确。');
    }

    // 发送分享请求给webview
    (window as any).uni.webView.postMessage({
        data: {
            type: "img",
            url: imgurl,
            // 方式：分享
            function: "share",
            header: {
                Authorization: `Bearer ${token.value}`,
                clientid: "e5cd7e4891bf95d1d19206ce24a7b32e",
            },
        },
    });
}
onMounted(() => {
    startTime.value && (currentDateFormat.value = (startTime.value as any).split(' ')[0])
    endTime.value && (currentDateFormatInterval.value = (endTime.value as any).split(' ')[0])
    const datas = currentDateFormat.value.split('-')
    const dataSecond = datas[2].split(' ')[0]
    const datasBottom = currentDateFormatInterval.value.split('-')
    const dataBottomSecond = datasBottom[2].split(' ')[0]
    currentDate.value = [
        datas[0],
        datas[1],
        dataSecond
    ]
    currentDateBottom.value = [
        datasBottom[0],
        datasBottom[1],
        dataBottomSecond
    ]
    gettotalByUserIdAndTime()
    if (user.value.indexOf('inventGroup') != -1) {
        getQrCode()
        GetQrCodeDeptName()
    }
    getQueryDeptCount()
})
// 查询楼层码
const getQrCode = async () => {
    const res = await qrCode()
    qrCodeData.value = `data: image/jpeg;base64,${btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
}
// 查询当前楼层
const GetQrCodeDeptName = async () => {
    const { msg = '' } = await getQrCodeDeptName({})
    qrCodeRowName.value = msg
}

// 限制最大可选时间
const maxDate = computed(() => {
    return new Date(currentDateBottom.value.join('/'))
})

// 限制最小可选时间
const minDate = computed(() => {
    return new Date(currentDate.value.join('/'))
})

/** 数据简报跳转 */
const briefingProducts = (type: string) => {
    if (['新增商品', '暂无大货', '上架商品', '主播选品', '成功入库'].includes(type)) {
        router.push({
            path: '/researchBriefingProduct',
            query: {
                type: type,
                avtiveIndex: avtiveIndex.value,
                startTime: currentDateFormat.value + ' 00:00:00',
                endTime: currentDateFormatInterval.value + ' 23:59:59'
            }
        })
    } else {
        router.push({
            path: '/researchBriefingSupplier',
            query: {
                type: type,
                avtiveIndex: avtiveIndex.value,
                startTime: currentDateFormat.value + ' 00:00:00',
                endTime: currentDateFormatInterval.value + ' 23:59:59'
            }
        })
    }
}
/** 日期选择 */
const onConfirm = () => {
    showPicker.value = false;
    currentDateFormat.value = currentDate.value.join("-")
    gettotalByUserIdAndTime();
};
/** 日期选择 */
const onConfirmBottom = () => {
    showPickerBottom.value = false
    currentDateFormatInterval.value = currentDateBottom.value.join("-")
    gettotalByUserIdAndTime();
}
/** 获取首页数据简报 */
const gettotalByUserIdAndTime = async () => {
    const res = await inventTimeTotal({
        startTime: currentDateFormat.value + ' 00:00:00',
        endTime: currentDateFormatInterval.value + ' 23:59:59'
    })
    res.data.forEach(item => {
        if (item.auditStatus == '增品') {
            addProductNums.value = item.total
        } else if (item.auditStatus == '暂无大货') {
            listingNums.value = item.total
        } else if (item.auditStatus == '建联') {
            jianlianNums.value = item.total
        } else if (item.auditStatus == '选中') {
            launchNums.value = item.total
        } else if (item.auditStatus == '入库') {
            warehousingNums.value = item.total
        } else if (item.auditStatus == '上架') {
            signNums.value = item.total
        }
    })
}

const centerList = ref([
    {
        name: "组长待审",
        nums: 0,
        id: "-12",
        img: new URL("@/assets/home/icon_zongjiandaishen.png", import.meta.url).href,
    },
    {
        name: "已选品",
        nums: 0,
        id: "100",
        img: new URL("@/assets/home/icon_jinglidaishen.png", import.meta.url).href,
    },
    {
        name: "包销临期",
        nums: 0,
        id: "包销临期",
        img: new URL("@/assets/home/icon_baoxiaolinqi.png", import.meta.url).href,
    },
    {
        name: "大货超期 ",
        nums: 0,
        id: "大货超期",
        img: new URL("@/assets/home/icon_dahuochaoqi.png", import.meta.url).href,
    },
]);

/** 首页快捷入口 */
const addProduct = (name: string) => {
    if (name == "添加商品") {
        router.push("/researchAddProduct");
    } else if (name == "添加供应商") {
        router.push("/researchAddSupplier");
    } else if (name == "已到商品") {
        router.push("");
    }
};
/** 获取版本更新公告 */
const getNotice = async () => {
    const res = await listNotice({})
    const privacyNotice = res.rows.find(item => item.noticeTitle === '版本更新公告');
    if (privacyNotice) {
        versionNotice.value = stripTags(privacyNotice.noticeContent);
    }
}
getNotice()
const getList = async () => {
    const res = await getInfo();
    roles.value = res.data.user.roles[0];
    userInfo.value = res.data.user;
    userPost.value = res.data.posts || [];
    const total = await getTotalInvent();
    centerList.value[0].nums = total.data[0].total;
    centerList.value[1].nums = total.data[1].total;
    centerList.value[2].nums = total.data[2].total;
    centerList.value[3].nums = total.data[3].total;
};
getList();

// 反显职位权限名称
const positionName = (data: any) => {
    let name: any = []
    data.forEach((item: any) => {
        name.push(item.postName)
    })
    return name.join('/')
}

/** 跳转 */
const toProductList = (id: string) => {
    if (id === '100') {
        router.push({
            path: '/selectProducts',
            query: {
                startTime: currentDateFormat.value,
                endTime: currentDateFormatInterval.value,
                type: '1',
                from: 'research'
            }
        })
    } else if (id == '大货超期' || id == '包销临期') {
        router.push({
            path: '/researchBriefingProduct',
            query: {
                type: id,
                avtiveIndex: avtiveIndex.value,
            }
        })
    }
    else if (id != '99') {
        router.push({ path: "/research/researchLists", query: { id: id } });
    }
};
/** 大货到期 */
const expiredClick = (type: string) => {
    router.push({
        path: '/researchBriefingProduct',
        query: {
            type: type,
            avtiveIndex: avtiveIndex.value,
        }
    })
}
/** 消息点击 */
const messageClcik = () => {
    router.push({
        path: `/notice`,
        query: {
            type: '研发部'
        }
    });
}
// 运营部消息统计
const getQueryDeptCount = async () => {
    const { data = {} } = await queryDeptCount({ queryType: 0 })
    messageTotal.value = (data?.waitCount || 0) || (data?.readCount || 0)
}
// const getCountNotReadMsg = async () => {
//     const { data = 0 } = await countNotReadMsg({})
//     newsQuantity.value = data
// }
// getCountNotReadMsg()
// 通知中心
// const icon_xiaoxiClick = () => {
//     router.push({
//         path: `/notice`
//     });
// }
</script>

<style lang="less" scoped>
// 从无到有 从上到下
@keyframes slide-show-top-bottom {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

// 从无到有 从下到上
@keyframes slide-show-bottom-top {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

// 从有到无 从下到上
@keyframes slide-hide-bottom-top {
    from {
        transform: translateY(-100%);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        opacity: 0;
    }
}

// 从有到无 从上到下
@keyframes slide-hide-top-bottom {
    from {
        transform: translateY(-100%);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        opacity: 0;
    }
}

.slide-show-top-bottom {
    animation: slide-show-top-bottom 1s ease forwards;
}

.slide-show-bottom-top {
    animation: slide-show-bottom-top 1s ease forwards;
}

.slide-hide-bottom-top {
    animation: slide-hide-bottom-top 1s ease forwards;
}

.slide-hide-top-bottom {
    animation: slide-hide-top-bottom 1s ease forwards;
}


.scan_code {
    width: 100%;
    height: calc(100vh - 50px);
    background: url('@/assets/home/icon_shouyebeijing1.png') no-repeat;
    background-position: 0 0;
    background-size: 100% 296px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    position: relative;
    overflow: auto;
    animation: slide-show-top-bottom 1s ease forwards;

    .title {
        width: 100%;
        margin-top: 60px;
        text-align: center;
        margin-bottom: 50px;
    }

    .conent {
        width: 345px;
        height: 612px;
        background: #FFFFFF;
        border-radius: 5px;
        position: relative;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: flex-start;

        .profile {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #E0F1FE;
            position: absolute;
            left: 142px;
            top: -30px;
        }

        .names {
            width: 100%;
            text-align: center;
            font-weight: 600;
            font-size: 16px;
            color: #1A1B1C;
            margin-top: 50px;
        }

        .dandp {
            width: 100%;
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
            margin-top: 10px;
        }

        .floor {
            width: 285px;
            height: 38px;
            background: linear-gradient(270deg, #0064FF 0%, #008FFF 100%);
            border-radius: 5px 5px 0px 0px;
            text-align: center;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            text-align: center;
            line-height: 38px;
            margin-top: 20px;
        }

        .qrcode {
            width: 285px;
            height: 265px;
            background: linear-gradient(180deg, #FFFFFF 0%, #EBF4FF 100%);
            border-radius: 0px 0px 5px 5px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            .message {
                width: 100%;
                text-align: center;
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                margin-top: 20px;
            }

            .code_content {
                width: 171px;
                height: 171px;
                margin-top: 30px;
            }
        }

        .refresh {
            width: 100%;
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            color: #0094FF;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;

            .van-image {
                width: 16px;
                height: 16px;
                margin-right: 5px;
            }
        }

        .glide {
            width: 19px;
            height: 19px;
            position: absolute;
            bottom: 30px;
        }

    }
}

.home-index {
    width: 100%;
    background: url("@/assets/home/icon_shouyebeijing.png") no-repeat;
    background-size: 100% 100%;
    padding-top: 60px;
    color: #1a1b1c;
    overflow-y: scroll;
    position: relative;

    // animation: slide-show-bottom-top 1s ease forwards;

    .icon_shanghuagengduo {
        position: absolute;
        top: 40px;
        width: 19px;
        height: 19px;
        left: 50%;
        transform: translateX(-50%);
    }

    &-user {
        height: 60px;
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        position: relative;

        &-info {
            margin-left: 20px;
            margin-top: 10px;

            &-name {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 16px;
                line-height: 16px;
                text-align: left;
                font-style: normal;
            }

            &-dandp {
                margin-top: 10px;
                font-size: 14px;
            }
        }
    }

    &-notice {
        margin-left: 15px;
        margin-right: 15px;
        width: calc(100 - 30px);
        box-sizing: border-box;
        height: 35px;
        background: linear-gradient(180deg, #DDF0FE 0%, #FFFFFF 100%);
        border-radius: 5px;
        margin-top: 15px;
        display: flex;
        align-items: center;
        padding: 0 15px;

        .notice_icon {
            width: 14px;
            height: 14px;
        }

        .font {
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
            margin-left: 10px;
            width: calc(100% - 30px);
            height: 35px;
        }

        :deep(.van-notice-bar) {
            background: none;
            padding: 0;
        }
    }

    &-data {
        height: 194px;
        background: url("@/assets/home/icon_shujubeijing.png") no-repeat;
        background-size: 100% 100%;
        padding: 15px 15px 0;
        margin: 15px;
        border-radius: 5px;

        &-title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            &-title {
                display: flex;
                width: 100px;

                &-text {
                    margin-left: 5px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 14px;
                    text-align: left;
                    font-style: normal;
                }
            }

            &-time {
                width: 140px;
                height: 24px;
                line-height: 24px;
                background: #d4edff;
                border-radius: 12px;
                display: flex;

                &-text {
                    margin: 2px 0;
                    width: 34px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    font-style: normal;
                }

                &-active {
                    background: #0094ff;
                    border-radius: 12px;
                    color: #ffffff;
                }
            }
        }

        &-card {
            margin-top: 15px;

            &-position {
                width: 95px;
                height: 64px;
                border-radius: 5px;
                display: flex;
                align-items: center;
                padding-left: 3px;

                &-text {
                    margin-left: 3px;
                    height: 36px;

                    div:nth-child(1) {
                        font-size: 16px;
                        font-weight: 600;
                        text-align: center;
                    }

                    div:nth-child(2) {
                        font-size: 12px;
                    }
                }
            }

            &-first {
                display: flex;
                justify-content: space-between;

                &-first {
                    background: linear-gradient(270deg, #e1e3fb 0%, #e2f2ff 100%);

                    &-text {
                        color: #0055ff;
                    }
                }

                &-second {
                    background: linear-gradient(270deg, #e1fbed 0%, #e2fff6 100%);

                    &-text {
                        color: #14ce67;
                    }
                }

                &-third {
                    background: linear-gradient(270deg, #fbe1f0 0%, #ffe2e2 100%);

                    &-text {
                        color: #fe4b4b;
                    }
                }
            }

            &-second {
                display: flex;
                justify-content: space-between;
                margin-top: 15px;

                &-first {
                    background: linear-gradient(270deg, #fbe9e1 0%, #fff5e2 100%);

                    &-text {
                        color: #ff5a1a;
                    }
                }

                &-second {
                    background: linear-gradient(269deg, #e1eefb 0%, #e2fffd 100%);

                    &-text {
                        color: #00beff;
                    }
                }

                &-third {
                    background: linear-gradient(270deg, #ebe1fb 0%, #f5e2ff 100%);

                    &-text {
                        color: #c12aff;
                    }
                }
            }
        }

        &-date {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #0094ff;
            width: calc(100% - 75px);
            justify-content: flex-end;

            &-first {
                display: flex;
                align-items: center;

                &-date {
                    margin-right: 5px;
                }
            }

            &-middle {
                margin: 0 10px;
            }

            &-second {
                display: flex;
                align-items: center;

                &-date {
                    margin-right: 5px;
                }
            }
        }
    }

    &-todo {
        height: 100px;
        background-color: #ffffff;
        border-radius: 5px;
        padding: 15px 15px 0;
        margin: 15px;

        &-title {
            display: flex;
            align-items: center;

            div:nth-child(2) {
                margin-left: 5px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
            }
        }

        &-list {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;

            &-first {
                text-align: center;
                position: relative;

                div:nth-child(2) {
                    margin-top: 8px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #1a1b1c;
                    line-height: 12px;
                }

                &-badge {
                    height: 15px;
                    min-width: 15px;
                    border-radius: 8px 8px 8px 0;
                    background-color: #fc2540;
                    position: absolute;
                    left: 35px;
                    top: -4px;

                    div {
                        color: #ffffff;
                        font-size: 11px;
                        text-align: center;
                        padding: 2px;
                    }
                }

                &-badges {
                    height: 15px;
                    min-width: 15px;
                    border-radius: 8px 8px 8px 0;
                    background-color: #fc2540;
                    position: absolute;
                    left: 32px;
                    top: -4px;

                    div {
                        color: #ffffff;
                        font-size: 11px;
                        text-align: center;
                        padding: 2px;
                    }
                }
            }
        }
    }

    &-shortcuts {
        height: 213px;
        padding: 15px 15px 0;
        margin: 15px;
        background-color: #ffffff;
        border-radius: 5px;
        margin-bottom: 60px;

        &-title {
            display: flex;
            align-items: center;

            div:nth-child(2) {
                margin-left: 5px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
            }
        }

        &-card {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            &-left {
                height: 160px;
                width: 154px;
                background: url("@/assets/home/icon_tianjiashangpinbeijing.png") no-repeat;
                background-size: 100% 100%;
                position: relative;

                &-image {
                    position: absolute;
                    left: 15px;
                    top: 15px;
                    width: 54px;
                    height: 54px;
                }

                &-text {
                    position: absolute;
                    right: 20px;
                    top: 27px;
                    font-size: 14px;
                    color: #ffffff;
                }

                &-tips {
                    margin: 15px 15px 0;
                    width: 123px;
                    position: absolute;
                    top: 70px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #ffffff;
                    line-height: 16px;
                }
            }

            &-right {
                margin-left: 10px;

                &-top {
                    width: 152px;
                    height: 74px;

                    background: url("@/assets/home/icon_tianjiagongyingshangbeijing.png") no-repeat;
                    background-size: 100% 100%;
                    position: relative;

                    &-image {
                        position: absolute;
                        left: 12px;
                        top: 7px;
                        width: 35px;
                        height: 35px;
                    }

                    &-text {
                        position: absolute;
                        right: 20px;
                        top: 10px;
                        font-size: 14px;
                        color: #ffffff;
                    }

                    &-tips {
                        margin: 15px 15px 0;
                        position: absolute;
                        top: 35px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        line-height: 16px;
                    }
                }

                &-bottom {
                    width: 152px;
                    height: 74px;
                    margin-top: 11px;

                    background: url("@/assets/home/icon_yaoyueyangpinbeijing.png") no-repeat;
                    background-size: 100% 100%;
                    position: relative;

                    &-image {
                        position: absolute;
                        left: 12px;
                        top: 7px;
                        width: 35px;
                        height: 35px;
                    }

                    &-text {
                        position: absolute;
                        right: 20px;
                        top: 10px;
                        font-size: 14px;
                        color: #ffffff;
                    }

                    &-tips {
                        margin: 15px 15px 0;
                        position: absolute;
                        top: 35px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        line-height: 16px;
                    }
                }
            }
        }
    }

    .supplier_detail_content_divorder {
        border-bottom: 1px solid #fafaff;
    }

    .supplier_detail_content_div_first {
        margin-top: 63vh;
    }

    .supplier_detail_content_div {
        font-size: 13px;
        height: 35px;
        // height: 25%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        :deep(.van-icon) {
            margin-left: 0% !important;
        }

        .label {
            min-width: 55px;
        }

        .van-image {
            width: 32px;
            height: 32px;
        }

        .value {
            color: #b8beca;
            max-width: calc(100% - 85px);
            display: flex;
            justify-content: right;
            word-break: break-all;
        }
    }

    .home-index-user-image {
        width: 60px;
        height: 60px;
    }

    .menu {
        position: absolute;
        right: 15px;

        .menu_cion {
            width: 20px;
            height: 20px;
        }
    }


    // .menu_cion {
    //     width: 14px;
    //     height: 14px;
    //     margin-top: 10px;
    //     position: absolute;
    //     right: 15px;
    // }

    .erweima_cion {
        width: 14px;
        height: 14px;
        margin-top: 10px;
        position: absolute;
        right: 15px;
    }

    .menu_news {
        width: 14px;
        height: 14px;
        top: 10px;
        position: absolute;
        right: 45px;
    }


    .QRcode {
        width: 315px;
        height: 350px;
        background-color: white;
        border-radius: 5px;

        .code_title {
            text-align: center;
            font-size: 16px;
            font-weight: Medium;
            padding-top: 28px;

            .guanbi_cion {
                position: absolute;
                top: 18px;
                right: 18px;
            }
        }

        .code {
            width: 201px;
            height: 201px;
            margin: 15px 57px;

            .code_content {
                width: 100%;
                height: 100%;
            }
        }

        .weixin_cion {
            margin-left: 141px;
        }
    }

    .savePicture {
        text-align: center;
        padding: 20px;
    }

    .right_popup {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 50px 15px;
        color: #1C1D1E;
        display: flex;
        flex-flow: column;
        justify-content: space-between;

        .right_popup_box {
            width: 100%;

            .right_popup_box_item {
                width: 100%;
                padding: 10px 0;
                border-bottom: 1px solid #efefef;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .right_popup_box_item_left {
                    display: flex;
                    align-items: center;

                    img {
                        width: 14px;
                        height: 14px;
                        margin-right: 20px;
                    }
                }
            }
        }

        .login-index-policy-text-rules {
            color: #009EFF;
            font-size: 13px;
            width: 100%;
            margin-top: 65vh;
        }

        .login-index-policy-text-rule {
            color: #009EFF;
            font-size: 13px;
            width: 100%;
        }

        .quit_button {
            width: 100%;
            height: 44px;
            background: #FDE7E7;
            border-radius: 5px;
            text-align: center;
            color: #FC2540;
            line-height: 44px;

            .quit_cion {
                width: 14px;
                height: 14px;
            }
        }
    }

    .home-index-data-card-first-first-text {
        white-space: nowrap;
    }

    .home-index-todo-title-image {
        width: 14px;
        height: 14rpx;
    }

    .home-index-data-card-first-first-image {
        width: 36px;
        height: 36px;
    }

    .home-index-todo-list-first-image {
        width: 40px;
        height: 40px;
    }
}
</style>